<template>
  <div>
    <a-skeleton :loading="skeLoading" active :paragraph="{ rows: 2 }">
      <a-card :bordered="false">
        <a-button style="margin:5px" type="primary" @click="goUpload">上传</a-button>
        <a-button style="margin:5px" v-for="item in btnList" :key="item.id" @click="btnevent(item.id)">{{ item.title }}
        </a-button>
      </a-card>
    </a-skeleton>
    <div class="ant-pro-pages-list-projects-cardList">
      <a-list
        :loading="loading"
        :data-source="data"
        :pagination="pagination"
        :grid="{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-card class="shadeBox ant-pro-pages-list-projects-card" hoverable>
            <img slot="cover" :src="item.cover+`-ltlogo`" style="width:100%;height:350px" />
            <a-card-meta :title="`[`+item.view_num+`] `+item.user">
              <template slot="description">
                <div style=" display: flex;justify-content: space-between;align-items: center;">
                  <ellipsis :length="50">{{ item.description }}</ellipsis>
                  <div>
                    <i class="iconfont icondianzan" @click="doZan(item.id)"> {{ infoZan }} </i>
                    <i v-if="iconShow" class="iconfont iconliulanshu">
                      {{ item.sum }}
                    </i>
                  </div>
                </div>
              </template>
            </a-card-meta>
            <!-- 遮罩 -->
            <div class="blackShade" v-show="shadeBotShow">
              <div class="shadeTop">
                <div class="shadeTop-man">
                  {{ item.title }}
                </div>
              </div>
              <div class="shadeBot">
                <div class="shadeBot-man">
                  <a-button type="primary" @click="showModal(item.id)">
                    <a-icon type="left" />观看记录 </a-button>
                  <a-button style="margin-left:20px" type="primary" @click="showModal2(item.id)"> 查看详情
                    <a-icon type="right" />
                  </a-button>
                  <a-button type="danger" @click="openCon(item.id)">删除
                    <a-icon type="right" />
                  </a-button>
                </div>
              </div>
            </div>
          </a-card>
        </a-list-item>
      </a-list>
    </div>
    <!-- 删除确认弹窗 -->
    <a-modal
      title=""
      :visible="visible3"
      :centered="true"
      :width="300"
      @ok="handleOk3"
      @cancel="handleCancel3"
      style="font-size:30px;">
      <a-icon class="delicon" type="exclamation-circle" />
      确定删除吗?
    </a-modal>
    <!-- 弹窗 查看记录-->
    <a-modal title="查看记录" :visible="visible" :footer="null" @cancel="handleCancel">
      <a-table
        :columns="columns"
        :dataSource="Lookdata"
        :rowKey="Lookdata => Lookdata.add_time"
        :scroll="{
          x:false,
          y:700
        }"
        :pagination="false">
      </a-table>
    </a-modal>

    <!-- 查看详情 -->
    <a-modal :title="infoTitle+`  `+infoUser" :visible="visible2" :centered="true" :width="700" @cancel="handleCancel2">
      <a-card>
        <div ref="foo" style="height: 700px;overflow-y:scroll;" >
          <img v-for="item in urlList" :key="item" :src="item" alt="">
        </div>
      </a-card>
      <div slot="footer">
        <div style="float:left">
          <a-button :disabled="zanButton" :loading="loading2" @click="doZan(infoId)"> <i
            class="iconfont icondianzan">{{ infoZan }}</i></a-button>
        </div>
        <div>
          <a-button type="Default" @click="handleCancel2">关闭</a-button>
          <a-button
            type="primary"
            class="tag"
            @click="handleOk2()">一键复制</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  TagSelect,
  StandardFormRow,
  Ellipsis,
  AvatarList
} from '@/components'
import {
  getCaseList,
  getCaseClass,
  getCaseInfo,
  doCaseZan,
  getCaseRecord,
  delCase
} from '@/api/user/caselib'
const TagSelectOption = TagSelect.Option
const AvatarListItem = AvatarList.AvatarItem
const columns = [{
  title: '用户',
  dataIndex: 'user'
  // scopedSlots: { customRender: 'name' }
},
{
  title: '时间',
  dataIndex: 'add_time'
}
]
export default {
  name: 'CaseLibrary',
  components: {
    AvatarList,
    AvatarListItem,
    Ellipsis,
    TagSelect,
    TagSelectOption,
    StandardFormRow
  },
  data () {
    return {
      skeLoading: true,
      anliId: '',
      headershow: false,
      message: '',
      // indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      infoShow: false,
      infoId: '',
      infoTitle: '',
      infoUser: '',
      infoZan: 0,
      // info: '',
      urlList: [],
      loading2: false,
      zanButton: false,
      shadeBotShow: true,
      columns,
      // columns2,
      idd: 0,
      pagination: {
        onChange: page => {
          console.log(page)
          this.getCaseList(this.idd, 15, page)
        },
        total: 20,
        pageSize: 15
      },
      Lookdata: [
        // {
        //   user: '张三',
        //   add_time: '2020-04-09'
        // }
      ],
      ModalText: 'Content of the modal',
      ModalText2: 'Content of the modal',
      visible: false,
      visible2: false,
      visible3: false,
      confirmLoading: false,
      iconShow: false,
      btnList: [{
        id: 0,
        title: '全部'
      },
      {
        id: -1,
        title: '点赞排行'
      },
      {
        id: -2,
        title: '观看排行'
      }
      ],
      data: [
      //   {
      //   id: 1,
      //   cover: '',
      //   user: 'hah',
      //   title: 'title2',
      //   description: '时间',
      //   updatedAt: 'updatedAt',
      //   zan: 22,
      //   sum: '',
      //   view_num: ''
      // }
      ],
      form: this.$form.createForm(this),
      loading: false
    }
  },
  filters: {
    // fromNow (date) {
    //   return moment(date).fromNow()
    // }
  },
  mounted () {
  },
  created () {
    // console.log('copybtn', this.$refs.tag)
    this.getCaseClass()
    this.getCaseList(0, 15, 1)
  },
  methods: {
    handleOk3 () {
      delCase(
        {
          id: this.anliId
        }
      ).then(res => {
        // console.log(res)
        this.$message.info('删除成功!')
        this.getCaseList(0, 15, 1)
      }).catch(err => {
        this.$message.info('删除失败!')
        console.log(err)
      })
      this.visible3 = false
      this.shadeBotShow = true
      // console.log(this.anliId)
    },
    handleCancel3 () {
      this.visible3 = false
      this.shadeBotShow = true
    },
    openCon (id) {
      // console.log(id)
      this.anliId = id
      this.visible3 = true
      this.shadeBotShow = false
    },
    condel (id) {
      console.log(id)
    },
    getCaseRecord (id) {
      getCaseRecord({
        id: id
      }).then(res => {
        // console.log(res.result)
        this.Lookdata = res.result
      }).catch(err => {
        console.log(err)
      })
    },
    getCaseInfo (id) {
      getCaseInfo({
        id: id
      }).then(res => {
        // console.log(res.result)
        this.visible2 = true
        this.infoId = res.result.id
        this.infoTitle = res.result.title
        this.infoUser = res.result.user
        this.infoZan = res.result.zan
        var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g // 筛选出url g全局 i
        var str = res.result.content
        var arr2 = str.match(reg) // 筛选出符合格式的数组 arr2=>["url","url"]
        for (var i = 0; i < arr2.length; i++) {
          arr2[i] = arr2[i] + '-ltlogo'
          // str = str.replace(reg, arr2[i] + '-ltlogo') // 替换(表达式,替换内容)
        }
        // console.log('arr2', arr2)
        this.urlList = arr2
        // this.message = str// 赋值
        // console.log('this.message', this.message)
      }).catch(err => {
        console.log(err)
      })
    },
    doZan (id) {
      // console.log(id)
      this.loading2 = true
      doCaseZan({
        id: id
      }).then(res => {
        // console.log(res.result)
        this.loading2 = false
        this.zanButton = true
        if (res.result === 1) {
          this.infoZan++
          this.$message.info('点赞成功!')
        } else {
          this.zanButton = true
          this.$message.info('请您不要重复点赞')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getCaseList (val, pageSize, page) {
      this.idd = val
      this.loading = true
      getCaseList({
        code: val,
        pageSize: pageSize,
        page: page
      }).then(res => {
        this.skeLoading = false
        // console.log('caselist', res)
        this.data = res.result.data.map(function (obj) {
          var rObj = {}
          rObj.id = obj.id
          rObj.user = obj.user
          rObj.title = obj.title
          rObj.cover = obj.content
          rObj.description = obj.date
          rObj.zan = obj.zan
          rObj.view_num = obj.view_num
          if (obj.sum) {
            rObj.sum = obj.sum
            this.iconShow = true
          } else {
            rObj.sum = ''
          }
          return rObj
        })
        this.loading = false
        // this.btnList.push(...arr)
        // console.log('data', this.data)
        const pagination = {
          ...this.pagination
        }
        pagination.total = res.result.total
        pagination.pageSize = res.result.per_page
        pagination.page = res.result.current_page
        this.pagination = pagination
      }).catch(err => {
        this.skeLoading = false
        this.loading = false
        console.log(err)
      })
    },
    getCaseClass () {
      getCaseClass({}).then(res => {
        // console.log(res.result)
        const arr = res.result.map(function (obj) {
          var rObj = {}
          rObj.id = obj.code
          rObj.title = obj.name
          return rObj
        })
        this.btnList.push(...arr)
        this.headershow = true
        // console.log('btnList', this.btnList)
      }).catch(err => {
        console.log(err)
      })
    },
    goUpload () {
      this.$router.push({
        // name: 'passGoods',
        path: `/admin/caseLibrary/newcase`
        // query: {
        //   id: val
        // }
      })
    },
    showModal (val) {
      this.getCaseRecord(val)
      this.shadeBotShow = false
      this.visible = true
    },
    showModal2 (val) {
      this.shadeBotShow = false
      this.getCaseInfo(val)
    },
    handleCancel (e) {
      // console.log('Clicked cancel button')
      this.visible = false
      this.shadeBotShow = true
    },
    handleCancel2 (e) {
      // console.log('Clicked cancel button')
      this.visible2 = false
      this.shadeBotShow = true
    },
    handleOk2 () {
      this.$nextTick(function () {
        // console.log('foo', this.$refs.foo)
        const selection = window.getSelection()
        const range = document.createRange()
        range.selectNode(this.$refs.foo)
        selection.addRange(range)
        document.execCommand('copy')
        selection.removeAllRanges()
      })
      setTimeout(() => {
        this.$message.success('复制成功')
        this.visible2 = false
        this.shadeBotShow = true
      }, 1000)
    },
    btnevent (val) {
      // console.log(val)
      this.getCaseList(val, 16, 1)
    }
  }
}
</script>

<style lang="less" scoped>
  .ant-pro-components-tag-select {
    /deep/ .ant-pro-tag-select .ant-tag {
      margin-right: 24px;
      padding: 0 8px;
      font-size: 14px;
    }
  }

  .ant-pro-pages-list-projects-cardList {
    margin-top: 24px;

    /deep/ .ant-list-pagination {
      text-align: center;
    }

    /deep/ .ant-card-meta-title {
      margin-bottom: 4px;
    }

    /deep/ .ant-card-meta-description {
      height: 44px;
      overflow: hidden;
      line-height: 22px;
    }

    .cardItemContent {
      display: flex;
      height: 20px;
      margin-top: 16px;
      margin-bottom: -4px;
      line-height: 20px;

      >span {
        flex: 1 1;
        color: rgba(241, 19, 19, 0.45);
        font-size: 12px;
      }

      /deep/ .ant-pro-avatar-list {
        flex: 0 1 auto;
      }
    }

    .shadeBox {
      position: relative !important;
      overflow: hidden;

      .blackShade {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 350px;

        .shadeTop {
          width: 100%;
          height: 250px;
          background-color: rgba(12, 12, 12, 0.5);
          position: absolute;
          top: -250px;
          left: 0;

          .shadeTop-man {
            margin: 0 auto;
            height: 250px;
            line-height: 250px;
            font-size: 30px;
            text-align: center;
            color: aliceblue;
          }
        }

        .shadeBot {
          width: 100%;
          height: 100px;
          background-color: rgba(32, 132, 93, 0.5);
          position: absolute;
          bottom: -400px;
          left: 0;
          line-height: 100px;

          .shadeBot-man {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 0 auto;
            width: 100%;
            height: 100px;
            line-height: 100px;
          }
        }
      }
    }

    .shadeBox:hover .blackShade .shadeTop {
      width: 100%;
      height: 250px;
      background-color: rgba(12, 12, 12, 0.5);
      position: absolute;
      transition: all 0.3s ease 0s;
      top: 0;
    }

    .shadeBox:hover .blackShade .shadeBot {
      width: 100%;
      height: 100px;
      background-color: rgba(32, 132, 93, 0.5);
      position: absolute;
      bottom: 0;
      line-height: 100px;
      transition: all 0.3s ease 0s;
    }
  }

  .delicon {
    width: 30px;
    height: 20px;
    font-size: 25px;
    color: rgb(250, 51, 51);
    line-height: 20px;
  }

  .imgInfo {
    width: 700px;
    // height: 600px;
    // background-color: rgb(0,0,0);
  }
</style>
